<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-18 13:22:47
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-30 13:37:19
-->
<template>
  <el-tabs class="app-tabs" @tab-click="handleTabClick" v-model="activateId">
    <el-tab-pane
      v-for="tab in props.tabs"
      :key="tab.id"
      :label="tab.name"
      :name="tab.id"
      :disabled="tab.children && tab.children?.length > 0"
    >
      <template #label v-if="tab.children && tab.children.length > 0">
        <el-dropdown
          trigger="click"
          style="width: 100%; height: 100%"
          @command="handleCommand(tab.id, $event)"
        >
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
          >
            {{ tab.name }}
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="child in tab.children"
                :key="child.id"
                :command="child.id"
              >
                {{ child.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <el-scrollbar
        max-height="500px"
        v-if="!tab.children || tab.children.length <= 0"
      >
        <slot :name="tab.id" />
      </el-scrollbar>
      <template v-else>
        <el-scrollbar max-height="500px">
          <p class="title">
            {{
              tab.children?.find((item) => item.id === props.activeTabId)?.name
            }}
          </p>
          <slot
            v-for="child in tab.children?.filter(
              (item) => item.id === props.activeTabId,
            )"
            :name="child.id"
          />
        </el-scrollbar>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'

import { ITabsConfig } from './type'

interface EmitsType {
  (e: 'update:activeTabId', activeTabId: string): void
}
const emit = defineEmits<EmitsType>()

const props = defineProps({
  tabs: {
    type: Array as PropType<ITabsConfig[]>,
    required: true,
  },
  activeTabId: {
    type: String,
    required: true,
  },
})

const activateId = ref(props.activeTabId)

const handleCommand = (tabId: string, command: string) => {
  activateId.value = tabId
  emitActivateId(command)
}
const handleTabClick = () => {
  emitActivateId(activateId.value)
}

const emitActivateId = (activeTabId: string) => {
  emit('update:activeTabId', activeTabId)
}
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>
